<template>
  <Row class="drive-chose-row">
    <Col span="9">
      <!-- <h3>驱动列表</h3> -->
      <div class="driveTab">
        <span :class="activeTab == 1 ? 'active' : ''" @click="activeTab = 1">驱动列表</span>
        <span :class="activeTab == 2 ? 'active' : ''" @click="activeTab = 2">所有列表</span>
      </div>
      <DriveList v-show="activeTab == 1" @sendDriveInfo="sendDriveInfo" ref="driveListRef" />
      <alldrives v-show="activeTab == 2" @sendDriveInfo="sendDriveInfo" ref="alldrivesRef" />
    </Col>
    <Col span="15">
      <h3>驱动信息</h3>
      <DriveInfo :info="driverInfo" v-if="table.showTable" />
    </Col>
  </Row>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, Ref } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import alldrives from './alldrives.vue';
  import DriveList from './drivelist.vue';
  import DriveInfo from './driveinfo.vue';
  import Bus from '/@/utils/helper/eventbus';
  export default defineComponent({
    components: { Row, Col, DriveList, DriveInfo, alldrives },
    setup() {
      const driveListRef = ref();
      const alldrivesRef = ref();
      const intinfo = ref({
        detail: {
          name: '无',
          device_type_id: '无',
          detail: {
            type: '无',
            config: '无',
            event_list: [],
          },
          method_list: [],
        },
      });
      const driverInfo = ref();
      const activeTab: Ref<Number> = ref(1);
      driverInfo.value = intinfo.value;
      let table = reactive({
        showTable: true,
      });
      //接受分组选择的驱动信息
      function sendDriveInfo(data) {
        driverInfo.value = data == undefined ? intinfo.value : data;
        table.showTable = false;
        table.showTable = true;
        if (activeTab.value == 2) {
          driveListRef.value.mrdriveId = undefined;
        } else {
          alldrivesRef.value.mrdriveId = undefined;
        }
        Bus.$emit('offdriveid', data);
      }
      return {
        sendDriveInfo,
        driverInfo,
        table,
        activeTab,
        driveListRef,
        alldrivesRef,
      };
    },
  });
</script>

<style lang="less">
  .drive-chose-row {
    h3 {
      color: #b4b4b4;
      font-size: 13px;
    }
    .active {
      border-bottom: 2px solid #0960bd;
      color: #0960bd;
    }
    .driveTab {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      span {
        margin-right: 20px;
        cursor: pointer;
      }
    }
    .ant-list {
      border: 1px solid #eef2f8;
    }
    .ant-col:last-child {
      padding-left: 10px;
    }
  }
  .drive-foot-row {
    margin-top: 10px;
    .ant-col:last-child {
      text-align: right;
    }
  }
</style>
